<template>
  <div>
      <h1>物证列表</h1>
    <el-alert
      v-if="del_success===1"
      title="删除成功"
      type="success">
    </el-alert>
    <div>
      <el-row :gutter="20">
        <el-col :span="18"><div>
          <el-radio-group v-model="radio1">
            <el-radio-button label="物证编号"></el-radio-button>
            <el-radio-button label="物证描述"></el-radio-button>
          </el-radio-group>
        </div></el-col>
        <el-col :span="2"><div>
          <el-button type="text" @click="this.withdraw">清空检索</el-button>
        </div></el-col>
      </el-row>
    </div>
      <el-input v-model="userinfo" placeholder="请输入信息"></el-input>
      <el-button type="primary"
                 style="width: 100%;margin-top: 20px; margin-bottom: 30px; border-radius:0px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
                 class="el-icon-search" @click="select">检索</el-button>
    <el-table

      :data="info1"
      height="360"
      border
      style="width: 100%">
      <el-table-column
        prop="wid"
        label="物证编号"
        align="center"
        width="160"
        :resizable="false">
      </el-table-column>
      <el-table-column
        prop="wtext"
        label="物证描述"
        align="center"
        width="300"
        :resizable="false">
      </el-table-column>
      <el-table-column
        prop="uid"
        label="提交者编号"
        align="center"
        width="160"
        :resizable="false">
      </el-table-column>
      <el-table-column
        prop="insertdate"
        label="提交日期"
        align="center"
        width="300"
        :resizable="false">
      </el-table-column>
      <el-table-column
        prop="state"
        label="物证状态"
        align="center"
        width="170"
        :resizable="false">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems">
    </el-pagination>
  </div>
</template>

<script>
    export default {
      name: "UserList" ,
      data(){
        return {
          id: '',
          radio1: '物证编号',
          userinfo: '',
          del_success:'',
          info:[],
          info1:[],
          currentPage: 1,
          pageSize: 2,
          totalItems: 0,
          filterTableDataEnd:[],
          flag:false,
          num:0
        }
      },
      created() {
        if (this.totalItems > this.pageSize) {
          for (let index = 0; index < this.pageSize; index++) {
            this.info1.push(this.info[index]);
          }
        } else {
          this.info1 = this.info;
        }
      },
      methods:{
        withdraw(){
          this.userinfo='';
          this.info1=[]
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.currentPage = val;
          //需要判断是否检索
          if (!this.flag) {
            this.currentChangePage(this.info);
            console.log(this.info1);
          } else {
            this.currentChangePage(this.filterTableDataEnd);
            console.log(this.info1);
          }
        },
        currentChangePage(list) {
          let from = (this.currentPage - 1) * this.pageSize;
          let to = this.currentPage * this.pageSize;
          this.info1 = [];
          for (; from < to; from++) {
            if (list[from]) {
              this.info1.push(list[from]);
            }
          }
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pageSize = val;
          this.handleCurrentChange(1);
        },
        select:function (){
          if(this.radio1==='物证编号'){
            this.axios({
              method:"post",
              headers: { 'content-type': 'application/json' },
              url: "http://evidence.frogking.cn/evidenceUser/selectByWid",
              params:{
                token:localStorage.getItem("token_only"),
                wid:this.userinfo
              }
            }).then(res=>{
              console.log(res)
              if(res["data"]["code"]==='406'){
                this.info=[res["data"]["item"]];
                this.totalItems = this.info.length;
                this.info1=this.info;
                console.log(this.info)
              }
              else if(res["data"]["code"]==='408'){
                this.$alert('该物证不存在', '错误提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.userinfo="";
                  }
                });
              }
              else if(res["data"]["code"]==='000'){
                this.$alert('token失效', '错误提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.$router.push("/login");
                    localStorage.removeItem("token_only");
                  }
                });
              }
              else if(res["data"]["code"]==='001'){
                this.$alert('身份不满足，禁止操作', '错误提示', {
                  confirmButtonText: '确定'
                });
              }
              else if(res["data"]["code"]==='002'){
                this.$alert('权限不满足，禁止操作', '错误提示', {
                  confirmButtonText: '确定'
                });
              }
            }).catch(function (error) {
              console.log(error);
            });
          }
          else if(this.radio1==='物证描述'){
            this.axios({
              method:"post",
              headers: { 'content-type': 'application/json' },
              url: "http://evidence.frogking.cn/evidenceUser/selectByText",
              params:{
                token:localStorage.getItem("token_only"),
                text:this.userinfo
              }
            }).then(res=>{
              console.log(localStorage.getItem("token_only"))
              console.log(res+this.userinfo)
              if(res["data"]["code"]==='406'){
                this.info=res["data"]["item"];
                this.totalItems = this.info.length;
                this.info1=this.info;
                //console.log(this.info1)
              }
              else if(res["data"]["code"]==='408'){
                this.$alert('该物证不存在', '错误提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.userinfo="";
                  }
                });
              }
              else if(res["data"]["code"]==='000'){
                this.$alert('token失效', '错误提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.$router.push("/login");
                    localStorage.removeItem("token_only");
                  }
                });
              }
              else if(res["data"]["code"]==='001'){
                this.$alert('身份不满足，禁止操作', '错误提示', {
                  confirmButtonText: '确定'
                });
              }
              else if(res["data"]["code"]==='002'){
                this.$alert('权限不满足，禁止操作', '错误提示', {
                  confirmButtonText: '确定'
                });
              }
            }).catch(function (error) {
              console.log(error);
            });
          }
        },
      }
    }
</script>

<style scoped>
</style>
